<script setup>
import { ref } from 'vue'
let subject = ref('')
let content = ref('')
let id = ref('')
let nextId = ref('')
let selectedOption = ref('自习室')
let formmessage = ref(
  {
    id: "",
    subject: '',
    content: '',
    place: '',
    status: '',
  }
)
const list = ref([])
const add = () => {
  if (subject.value === '') {
    alert('学习科目为必填项!')
    return
  }
  nextId.value = String(Math.max(...list.value.map(item => item.id)) + 1 > 0 ? Math.max(...list.value.map(item => item.id)) + 1 : 1)
  const obj = {
    id: nextId.value,
    subject: subject.value,
    content: content.value,
    place: selectedOption.value,
    status: false,
  }
  list.value.push(obj)
  subject.value = ''
  content.value = ''
  selectedOption.value = "自习室"
}

const find = () => {
  if (id.value === '') {
    alert('序号不能为空')
    return
  }
  const element = list.value.find(item => item.id == id.value);
  formmessage.value.id = element.id
  formmessage.value.subject = element.subject
  formmessage.value.content = element.content
  formmessage.value.place = element.place
  formmessage.value.status = element.status
}
let options = ref([
  { placeCode: 0, place: '自习室' },
  { placeCode: 1, place: '图书馆' },
  { placeCode: 2, place: '宿舍' }
])

const change1 = async () => {
  if (id.value === '') {
    alert("id为空，请输入id或点击修改进行修改")
    return
  }
  const index = list.value.findIndex(item => item.id == id.value);

  if (index !== -1) {
    // 如果找到了匹配的项，将其替换为新对象
    const updatedItem = { ...formmessage.value };
    // 将副本分配给列表数组中的项目
    list.value[index] = updatedItem;
  } else {
    console.log("未找到匹配的项");
  }

  id.value = '';

  const emptyForm = {
    id: "",
    subject: '',
    content: '',
    place: '',
    status: '',
  };

  // 重置 formmessage 的值
  Object.assign(formmessage.value, emptyForm);
}
const changeitem = ID => {
  id.value = ID;
  const element = list.value.find(item => item.id == id.value);
  formmessage.value.id = element.id
  formmessage.value.subject = element.subject
  formmessage.value.content = element.content
  formmessage.value.place = element.place
  formmessage.value.status = element.status

}
const remove = (id, status) => {
  if (status) {
    list.value = list.value.filter(item => item.id !== id)
  } else {
    alert("请完成该学习计划后再进行删除操作！")
  }

}

</script>

<template>
  <div class="card">
    <!-- 标题区域-->
    <div class="card-header">学习计划表</div>
    <!--提交区域-->
    <div class="card-body">
      <form @submit.prevent="add">
        <div class="row g-4">
          <!--学习科目 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addonl">学习科目</span>
              <input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="subject">
            </div>
          </div>
          <!--学习任务 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addonl">学习内容</span>
              <textarea class="form-control" v-model.trim="content" placeholder="请输入学习内容"
                :style="{ height: '32px' }"></textarea>
            </div>
          </div>
          <!--学习地点 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习地点</span>
              <select class="form-select form-select-sm" v-model="selectedOption">
                <option v-for="option in options" :value="option.place" :key="option.placeCode">{{ option.place }}
                </option>
              </select>
            </div>
          </div>
          <!--添加按钮-->
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加</button>
          </div>
        </div>
      </form>
    </div>

    <div class="card-body">
      <form @submit.prevent="find">
        <div class="row g-4">
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addonl">id</span>
              <input type="text" class="form-control" placeholder="请输入id" v-model.trim="id">
            </div>
          </div>
          <div class="col-auto">
            <button class="btn btn-primary" type="submit">查找</button>
          </div>
          <!--学习科目 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addonl">学习科目</span>
              <input type="text" class="form-control" placeholder="请输入学习科目" v-model.trim="formmessage.subject">
            </div>
          </div>
          <!--学习任务 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addonl">学习内容</span>
              <textarea class="form-control" v-model.trim="formmessage.content" placeholder="请输入学习内容"
                :style="{ height: '32px' }"></textarea>
            </div>
          </div>
          <!--学习地点 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">学习地点</span>
              <select class="form-select form-select-sm" v-model="formmessage.place">
                <option v-for="option in options" :value="option.place" :key="option.placeCode">{{ option.place }}
                </option>
              </select>
            </div>
          </div>
          <div class="col-auto">
            <button class="btn btn-primary" @click="change1" type="button">修改</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <table class="table table-striped table hover table-bordered">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">学习科目</th>
        <th scope="col">学习内容</th>
        <th scope="col">学习地点</th>
        <th scope="col" style="width: 15%;">完成状态</th>
        <th scope="col">操作</th>
        <th scope="col">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.subject }}</td>
        <td>{{ item.content }}</td>
        <td>{{ item.place }}</td>
        <td>
          <div class="form-check form-switch">
            <input class="form-check-input" type="checkbox" role="switch" :id="'cb' + item.id" v-model="item.status" />
            <label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已完成</label>
            <label class="form-check label" :for="'cb' + item.id" v-else>未完成</label>
          </div>
        </td>
        <td>
          <a href="#" @click="remove(item.id, item.status)">删除</a>
        </td>
        <td>
          <a href="#" @click="changeitem(item.id)">修改</a>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped></style>
